<template>
  <a-card>
    <div class="card-header">
      <a-space>
        <span class="card-header-title">成员管理</span>
        <a-tag>{{store.members.length||0}}</a-tag>
      </a-space>
      <a-space>
        <a-button type="primary"><share-alt-outlined/>邀请成员</a-button>
        <a-button><user-add-outlined/>新增成员</a-button>
        <a-input-search placeholder="请输入用户名" class="width" />
      </a-space>
    </div>
    <a-table
      :columns="columns"
      :data-source="store.members"
      :pagination="tablePageConfig"
      :loading="loading"
      :row-key="record => record.id"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'user_name'">
          <a-flex :gap="8">
            <a-avatar size="small" :src="record.avatar" alt="" class="avatar"/>
            <span>{{record.user_name}}</span>
            <a-tag>{{record.user_mobile}}</a-tag>
          </a-flex>
        </template>
        <template v-if="column.key === 'role_name'">
          <a-tag :color="record.role_style">{{record.role_name}}</a-tag>
        </template>
        <template v-if="column.key === 'action'">
          <div class="table-action" v-if="record.role_id ===1">
            <span @click="handleEdit(record)"><edit-outlined/>更改角色</span>
            <span @click="handleDelete(record.id)"><user-delete-outlined/>移除</span>
          </div>
        </template>
      </template>
    </a-table>
  </a-card>
  <member-modal v-model:open="open" :member="member"/>
</template>
<script setup lang="ts">
import {tablePageConfig} from "@/config";
import {UserAddOutlined, ShareAltOutlined,UserDeleteOutlined,EditOutlined} from "@ant-design/icons-vue";
import {onMounted, ref} from "vue";
import {useMemberStore} from "@/store/member";
import MemberModal from "@/views/admin/components/MemberModal.vue";
import {Modal} from "ant-design-vue";

interface MemberType {
  user_id: number;
  role_id: number;
  user_name: string;
  user_mobile: string;
  role_name: string;
  role_style: string;
  join_time: string;
  enterprise_id: number;
}
const store = useMemberStore(),
    open = ref(false),
    member = ref<MemberType>({})
const columns = [
  {title: '姓名', dataIndex: 'user_name', key: 'user_name'},
  {title: '角色', dataIndex:'role_name',key: 'role_name',width: 200},
  {title: '加入时间', dataIndex: 'join_time', key: 'join_time',width:200 },
  {title: '管理', key: 'action',width: 200,},
]
let selectedRowKeys = ref<string[]>([])
let loading = ref(false)
const onSelectChange = (selectedRowKeys: string[]) => {
  selectedRowKeys.value = selected
}
onMounted(()=>{
  store.getMembers()
})
//移除成员 使用Modal
const handleDelete = (id:number) => {
  Modal.confirm({
    title: '确认删除该成员吗？',
    content: '删除后无法恢复',
    okText: '确认',
    cancelText: '取消',
    onOk: async () => {
      const res = await memberDelete(id)
      if(res.code === 200){
        await getDataList()
      }
      useMessage(res.code,res.message)
    }
  })
}
const handleEdit = (record:MemberType) => {
  member.value = record
  open.value = true
}
</script>

<style scoped>

</style>